{% extends "CmsBundle::base.html.twig" %}

{% block pageContent %}
    <div class="col-xs-12">
    <!-- PAGE CONTENT BEGINS -->
    <div class="table-responsive">
    <table id="sample-table-1" class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;">
    <thead>
    <tr>
        <th class="center">
            <label><input type="checkbox" class="ace" /><span class="lbl"></span></label>
        </th>
        <th class="hidden-480">名称</th>
        <th class="hidden-480">角色</th>
        <th class="hidden-480">权限</th>
        <th></th>
    </tr>
    </thead>

    <tbody>
    {% for item in groups %}
    <tr>
        <td class="center">
            <label>
                <input type="checkbox" class="ace" name="check_id" value="{{ item.id }}" />
                <span class="lbl"></span>
            </label>
        </td>

        <td>
            {{ item.name }}
        </td>
        <td>
            {{ item.role }}
        </td>
        <td>{{ item.privilege }}</td>
        <td>
            <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                <a href="{{ path("yearnfar_cms_groups_edit") }}?gid={{ item.id }}">
                    <button class="btn btn-xs btn-info">
                        <i class="icon-edit bigger-120"></i>
                    </button>
                </a>
                <a href="{{ path("yearnfar_cms_groups_delete") }}?gid={{ item.id }}">
                    <button class="btn btn-xs btn-danger">
                        <i class="icon-trash bigger-120"></i>
                    </button>
                </a>
            </div>
        </td>
    </tr>
    {% endfor %}
    </tbody>
    </table>
        <div style="overflow:hidden; background-color: #eff3f8; padding:15px 5px 10px 5px;">
            <div class="col-sm-6">
                <div class="dataTables_info" id="sample-table-2_info">
                    <span>选中项：</span>
                    <select id="mutil_oper" name="oper">
                        <option value="">操作</option>
                        <option value="delete">删除</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="dataTables_paginate paging_bootstrap">
                    <ul class="pagination">
                        <li>
                            <span style="margin-right: 5px;">总共{{ records }}条记录</span>
                        </li>
                        <!-- 上一页-->
                        <li class="prev{% if page<=1 %} disabled{% endif %}">
                            <a id="page_prev" href="javascript:void(0);">
                                <i class="icon-double-angle-left"></i>
                            </a>
                        </li>
                        <!-- 第几页 / 总页数-->
                        <li>
                            <span style="margin: 0 5px;">{{ page }} / {{ total }}</span>
                        </li>
                        <!-- 下一页-->
                        <li class="next{% if page>=total %} disabled{% endif %}">
                            <a id="page_next" href="javascript:void(0);">
                                <i class="icon-double-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <input type="text" name="page_go" style="width: 50px;margin: 0 5px;">
                            <a id="page_go" href="javascript:void(0);" class="btn btn-sm" style="float:right;"> 跳转 </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div><!-- /.table-responsive -->

    <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
{% endblock %}

{% block inlineScripts %}
<script type="text/javascript">
    //
    $('table th input:checkbox').on('click' , function(){
        var p = this;
        $(this).closest('table').find('tr > td:first-child input:checkbox').each(function(){
            this.checked = p.checked;
            $(this).closest('tr').toggleClass('selected');
        });

    });

    var total = {{ total }};
    var page  = {{ page }};
    var path  = "{{ path("yearnfar_cms_groups_index") }}";

    $("#mutil_oper").on('change',function() {
        switch (this.value) {
            case 'delete' :
                    alert("deleted!");
                break;
        }
        return ;
    });

    $(".pagination a").on('click', function() {
        switch (this.id) {
            case 'page_prev':
                if (page > 1) {
                    window.location.href = path+"?page=" + (page-1);
                }
                break;
            case 'page_next':
                if (page < total) {
                    window.location.href = path+"?page=" + (page+1);
                }
                break;
            case 'page_go':
                var page_go = $(".pagination input[name=page_go]").val();//取值
                if (page_go>=1 && page_go<=total) {
                    window.location.href = path+"?page=" + (page_go);
                }
                break;
        }
        return ;
    });
</script>
{% endblock %}